<template>
    <div class="child-content">
        <div class="form-show">
            <el-form ref="form" :inline="true" :model="formData" size="default">
                <div class="self-form">
                    <el-form-item label="日期" prop="dateRange">
                        <el-date-picker v-model="dateRange" type="daterange" clearable range-separator="至"
                            value-format="YYYY-MM-DD" style="width: 448px" start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </el-form-item>

                    <el-form-item label="论文标题" prop="objName" style="margin-right: 0">
                        <el-input v-model.trim="formData.objName" placeholder="请输入论文标题" clearable
                            style="width: 224px"></el-input>
                    </el-form-item>
                </div>

                <div class="self-form-end">
                    <el-form-item style="margin: 0">
                        <el-button type="primary" @click="queryData">查询</el-button>
                    </el-form-item>
                </div>

            </el-form>
        </div>

        <div class="data-table">
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="productNo" label="论文编码" align="center" width="100"/>
				<el-table-column prop="objName" label="论文题目" >
					<template #default="scope">
					    <span class="product-name" @click="hanldeDetail(scope.row.objUid)">{{ scope.row.objName}}</span>
					</template>
				</el-table-column>
                <el-table-column prop="numbers" label="字数" align="center" width="80"/>
                <el-table-column prop="showFile" label="文档类型" align="center" width="80"/>
				<!--
                <el-table-column prop="objType" label="收藏类型" align="center" />-->
                <el-table-column prop="lunwenType" label="论文类型" align="center" width="80"/> 
                <el-table-column prop="collectTime" label="收藏时间" width="160" />
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button type="text" size="mini" @click="cancelCollect(scope.row)">取消收藏</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :small="false"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
const router = useRouter()
import { ElMessageBox, ElMessage  } from 'element-plus'
import { getUserCollectList, changeCollect } from '@/api/index'

const dateRange = ref([])
const formData = reactive({
    startDate: '',
    endDate: '',
    objName: '',
})

const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const tableData = ref([])

watch(() => dateRange.value, (newVal, oldVal) => {
    if (newVal) {
        formData.startDate = newVal[0]
        formData.endDate = newVal[1]
    } else {
        formData.startDate = ''
        formData.endDate = ''
    }
})

const hanldeDetail = (item) => {	
    router.push(`/thesisDownload/${item}`)
}

const queryData = () => {
    pageNum.value = 1
    getTableData()
}

const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    pageNum.value = val
    getTableData()
}

const getTableData = async () => {
    const res = await getUserCollectList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formData
    })
    if (res) {
        let { data } = res
        tableData.value = data
        total.value = res.total
    }
}

const cancelCollect = async (item) => {
    ElMessageBox.confirm('确定取消收藏该论文吗？').then(() => {
        changeCollect({
            objUid: item.objUid,
            objType: 'good',
        }).then(() => {
            ElMessage.success('取消收藏成功')
            getTableData()
        })
    })
}

onMounted(() => {
    getTableData()
})
</script>

<style lang="scss" scoped>
.form-show {
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 16px;
    margin-bottom: 16px;

    .self-form {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .self-form-end {
        justify-content: flex-end;
    }
}

.alert-box {
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(252, 183, 53, 0.2);
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-weight: 700;

    ::v-deep {
        .el-alert__icon {
            color: rgba(252, 183, 53, 1);
        }
    }
}

.data-table {
    width: 100%;
    height: auto;
    position: relative;

    .item-score {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(102, 102, 102, 1);
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;

        .item-score-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
    }

    .pagination-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 24px;
    }
}

::v-deep {
    .el-input__wrapper {
        box-shadow: none;
    }

    .el-table th.el-table__cell {
        background: rgba(244, 247, 255, 1);
        border-bottom-color: transparent;
        color: rgba(5, 11, 32, 1);
    }

    .el-select__placeholder {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-range-input {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
</style>